<template>
  <div class="dashboard">
    <div class="meterType">
      <span :class="{ active: isActive }" @click="changeType(1)">电表</span>
      <span :class="{ active: !isActive }" @click="changeType(2)">水表</span>
    </div>

    <div class="content">
      <div class="leftContent">
        <div class="top">
          <div class="top_item" style="background: #278bff">
            <div class="pic">
              <img src="../../assets/image/money.png" alt="" />
            </div>
            <div class="top_item_title" style="color: #fff">
              <span>本月收入(元)</span>
              <span style="font-size: 30px; font-weight: bold">{{
                Number(moneyAmountTitle).toFixed(2)
              }}</span>
            </div>
          </div>
          <div class="top_item" style="background: #ffaa35">
            <div class="pic">
              <img src="../../assets/image/meterNum.png" alt="" />
            </div>

            <div class="top_item_title" style="color: #fff">
              <span>本月用{{ meterType == 1 ? "电(度)" : "水(m³)" }}</span>
              <span style="font-size: 30px; font-weight: bold">{{
                Number(amountTitle).toFixed(2)
              }}</span>
            </div>
          </div>
          <div class="top_item" style="background: #2bcd7f" @click="jumpDevice">
            <div class="pic">
              <img src="../../assets/image/money1.png" alt="" />
            </div>

            <div class="top_item_title" style="color: #fff">
              <span>{{ meterType == 1 ? "电表总数" : "水表总数" }}</span>
              <span style="font-size: 30px; font-weight: bold">{{
                meterCount
              }}</span>
            </div>
          </div>
        </div>
        <div class="center" ref="center">
          <div
            class="top1"
            style="
              display: flex;
              justify-content: space-between;
              padding: 0 30px;
              align-items: center;
              box-sizing: border-box;
            "
          >
            <div
              class="left"
              style="display: flex; align-items: center; font-weight: bold"
            >
              {{ meterType == 1 ? " 用电量统计" : "用水量统计" }}
              <div
                style="
                  height: 20px;
                  width: 3px;
                  background-color: #278bff;
                  margin: 0 20px;
                "
              ></div>
              <span>{{ amount }}</span
              >{{ meterType == 1 ? "度" : "m³" }}
            </div>
            <div class="right">
              <el-radio-group
                @input="dateChange"
                v-model="timeData.dateOperation"
              >
                <el-radio-button label="year">年</el-radio-button>
                <el-radio-button label="month">月</el-radio-button>
              </el-radio-group>
              <el-date-picker
                :picker-options="pickerOptions"
                v-model="timeData.date"
                :type="timeData.dateOperation == 'year' ? 'year' : 'month'"
                clearable
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
                @change="dateChange"
              >
              </el-date-picker>
            </div>
          </div>
          <el-empty
            :image-size="100"
            v-if="showLine == false"
            description="暂无数据"
          ></el-empty>
          <div
            v-else
            id="line"
            v-loading="Line"
            ref="line"
            style="width: 100%; height: 100%"
          ></div>
        </div>
        <div class="bottom">
          <div
            class="top1"
            style="
              display: flex;
              justify-content: space-between;
              padding: 0 30px;
              align-items: center;
              box-sizing: border-box;
            "
          >
            <div
              class="left"
              style="display: flex; align-items: center; font-weight: bold"
            >
              收入统计
              <div
                style="
                  height: 20px;
                  width: 3px;
                  background-color: #278bff;
                  margin: 0 20px;
                "
              ></div>
              <span>￥{{ moneyAmount }}</span
              >元
            </div>
            <div class="left_center" style="font-weight: bold">
              线上收入-￥{{ onlinePay }}
            </div>
            <div class="left_center" style="font-weight: bold">
              线下收入-￥{{ underPay }}
            </div>
            <div class="right">
              <el-radio-group
                @input="dateChange1"
                v-model="timeData1.dateOperation"
              >
                <el-radio-button label="year">年</el-radio-button>
                <el-radio-button label="month">月</el-radio-button>
              </el-radio-group>
              <el-date-picker
                :picker-options="pickerOptions1"
                v-model="timeData1.date"
                :type="timeData1.dateOperation == 'year' ? 'year' : 'month'"
                clearable
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
                @change="dateChange1"
              >
              </el-date-picker>
            </div>
          </div>
          <div  id="bar" ref="bar" v-loading="Bar" style="width: 100%; height: 100%"></div>
        </div>
      </div>
      <div class="rightContent">
        <div class="top">
          <div class="title" style="font-weight: bold">
            本月收入排行榜(前五)
          </div>
          <el-empty v-if="showPie == false" description="暂无数据"></el-empty>

          <div
            v-else
            id="pie"
             v-loading="Pie"
            ref="pie"
            style="width: 100%; height: 100%"
          ></div>
        </div>
        <div class="top">
          <div class="title" style="font-weight: bold">设备详情</div>
          <div class="content" ref="content" >
            <div class="item" @click="goDeviceModule(meterType, hezha)">
              <div style="display: flex; align-items: center; width: 40%">
                <img
                  style="margin-right: 10%"
                  src="../../assets/image/hezha.png"
                  alt=""
                />
                <div>{{ meterType == 1 ? "合闸电" : "开阀水" }}表</div>
              </div>
              <span style="font-size: 25px">{{ hezhaCount }}</span>
            </div>
            <div class="item" @click="goDeviceModule(meterType, lazha)">
              <div style="display: flex; align-items: center; width: 40%">
                <img
                  style="margin-right: 10%"
                  src="../../assets/image/lazha.png"
                  alt=""
                />
                <div>{{ meterType == 1 ? "拉闸电" : "关阀水" }}表</div>
              </div>
              <span style="font-size: 25px">{{ lazhaCount }}</span>
            </div>

            <div class="item" @click="goDeviceModule(meterType, yichang)">
              <div style="display: flex; align-items: center; width: 40%">
                <img
                  style="margin-right: 10%"
                  src="../../assets/image/yichang.png"
                  alt=""
                />
                <div>异常{{ meterType == 1 ? "电" : "水" }}表</div>
              </div>
              <span style="color: red; font-size: 25px">{{
                yichangCount
              }}</span>
            </div>

            <div class="item" @click="goDeviceModule(meterType, low)">
              <div style="display: flex; align-items: center; width: 40%">
                <img
                  style="margin-right: 10%"
                  src="../../assets/image/di.png"
                  alt=""
                />
                <div>低电量{{ meterType == 1 ? "电" : "水" }}表</div>
              </div>
              <span style="color: orange; font-size: 25px">{{ lowCount }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 设备详情点击每一项电表当前状态展示详情 -->
    <div class="dialogDeviceDetail">
      <el-dialog
        title="详情"
        :visible.sync="DeviceDetailDialogShow"
        width="65%"
        :close-on-click-modal="false"
        :destroy-on-close="true"
      >
        <!-- 内容展示区 -->
        <div class="qrcode_content">
          <!-- 表格展示区域 -->
          <template>
            <!-- 每一项点击触发@row-click="onRowClick" -->
            <el-table height="600px" :data="paginatedData" style="width: 100%">
              <template slot="empty">
                <el-empty description="暂无数据"></el-empty>
              </template>
              <el-table-column
                width="100"
                align="center"
                prop="meterName"
                show-overflow-tooltip
                label="名称"
              >
              </el-table-column>
              <el-table-column
                width="100"
                align="center"
                prop="meterModel"
                show-overflow-tooltip
                label="设备类型"
              >
                <template slot-scope="scope">
                  <el-tag type="success">{{ scope.row.meterModel }}</el-tag>
                </template>
              </el-table-column>
              <el-table-column
                width="150"
                align="center"
                prop="meterNumber"
                label="表号"
                show-overflow-tooltip
              >
                <template slot-scope="scope">
                  {{ scope.row.meterNumber }}
                </template>
              </el-table-column>

              <el-table-column
                width="150"
                align="center"
                prop="meterUseCount"
                show-overflow-tooltip
                :label="meterType == 1 ? '用电量(度)' : '用水量(m³)'"
              >
              </el-table-column>
              <el-table-column
                width="150"
                align="center"
                prop="yesterdayUse"
                show-overflow-tooltip
                :label="meterType == 1 ? '昨日用电量(度)' : '昨日用水量(m³)'"
              >
              </el-table-column>
              <el-table-column
                width="150"
                align="center"
                prop="meterSurplusCount"
                show-overflow-tooltip
                :label="meterType == 1 ? '剩余电量(度)' : '剩余水量(m³)'"
              >
              </el-table-column>
              <el-table-column
                width="150"
                align="center"
                prop="meterSinglePrice"
                show-overflow-tooltip
                :label="meterType == 1 ? '单价(元/度)' : '单价(元/m³)'"
              >
              </el-table-column>
              <el-table-column
                show-overflow-tooltip
                align="center"
                prop="meterAddress"
                label="设备地址"
              >
              </el-table-column>
            </el-table>
          </template>
        </div>

        <!-- 分页器 -->
        <!-- 分页 -->
        <el-pagination
          v-show="Device_tableData.length !== 0"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[3, 5, 8, 10, 30, 50, 70, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="Device_tableData.length"
        >
        </el-pagination>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  getQuantitiesApi,
  getIncomeApi,
  getIncomeRankApi,
  getDevice1Api
} from "../../api/devive";
export default {
  data() {
    return {
      pickerOptions: {
        disabledDate: time => {
          return time.getTime() > Date.now();
        }
      },
      pickerOptions1: {
        disabledDate: time => {
          return time.getTime() > Date.now();
        }
      },
      isActive: true,
      showPie: false,
      amount: 0,
      moneyAmount: "0.00",
      onlinePay: "0.00",
      underPay: "0.00",
      meterType: "1",
      timeData: {
        date: "",
        dateOperation: "month"
      },
      timeData1: {
        date: "",
        dateOperation: "month"
      },
      optionData: "",
      showLine: false,
      searyData: "",
      optionData1: "",
      searyData1: "",
      moneyAmountTitle: "0.00",
      amountTitle: "0.00",
      myChart: null,
      option: {},
      meterCount: "0",
      hezhaCount: 0, // 合闸数量
      lazhaCount: 0, // 拉闸数量
      yichangCount: 0, // 异常数量
      lowCount: 0, // 低电量数量
      hezha: [], //合闸表格数据
      lazha: [], // 拉闸表格数据
      yichang: [], // 异常表格数据
      low: [], // 低电量表格数据
      DeviceDetailDialogShow: false, // 设备详情弹框的显示隐藏标识符
      Device_tableData: [
        {
          meterId: 1394456821612544,
          meterName: "测试蓝牙",
          meterNumber: "2312106D6CCA",
          meterAddress: "蓝牙",
          chargeTimes: null,
          meterStatus: 1,
          meterModelId: 2,
          meterModel: "蓝牙电表",
          meterUseCount: 0,
          meterSurplusCount: 50,
          meterReadingTime: "2023-12-14 17:03:35",
          meterSinglePrice: 1.2,
          csq: null,
          imei: null,
          iccid: null,
          meterCode: null,
          meterType: 1,
          voltage: "0.00",
          ampere: "0.00",
          batLow: 1,
          hardwareName: "导轨_单相_CH573_A",
          ver: "AB001S0005",
          isForbid: false,
          isWaterMultiplier: false,
          limitSwitch: false,
          limitAmount: 0,
          averPid: null,
          yesterdayUse: "0.00",
          online: false
        },
        {
          meterId: 1395497317949440,
          meterName: "bug",
          meterNumber: "231225CECB9B",
          meterAddress: "bug",
          chargeTimes: null,
          meterStatus: 1,
          meterModelId: 2,
          meterModel: "蓝牙电表",
          meterUseCount: 1.6,
          meterSurplusCount: 8.4,
          meterReadingTime: "2023-12-25 16:07:55",
          meterSinglePrice: 1,
          csq: null,
          imei: null,
          iccid: null,
          meterCode: null,
          meterType: 1,
          voltage: "219.80",
          ampere: "0.00",
          batLow: 0,
          hardwareName: "壁挂_单相_CH573_A",
          ver: "AF001S0032",
          isForbid: false,
          isWaterMultiplier: false,
          limitSwitch: false,
          limitAmount: 0,
          averPid: null,
          yesterdayUse: "0.00",
          online: false
        },
        {
          meterId: 1400247120592896,
          meterName: "4gOTA测试",
          meterNumber: "240301DDEAB5",
          meterAddress: "4gOTA测试",
          chargeTimes: null,
          meterStatus: 1,
          meterModelId: 1,
          meterModel: "4G电表",
          meterUseCount: 0.58,
          meterSurplusCount: 9.42,
          meterReadingTime: "2024-03-22 11:01:47",
          meterSinglePrice: 1,
          csq: "25",
          imei: "864145070058597",
          iccid: "89860322472000606460",
          meterCode: null,
          meterType: 1,
          voltage: "241.60",
          ampere: "0.01",
          batLow: 0,
          hardwareName: "壁挂_单相_CH573_A",
          ver: "AF001S0032",
          isForbid: false,
          isWaterMultiplier: false,
          limitSwitch: false,
          limitAmount: 0,
          averPid: null,
          yesterdayUse: "0.00",
          online: false
        },
        {
          meterId: 1402936410071040,
          meterName: "bf版本",
          meterNumber: "240321DD0AA4",
          meterAddress: "办公室",
          chargeTimes: null,
          meterStatus: 1,
          meterModelId: 1,
          meterModel: "4G电表",
          meterUseCount: 0,
          meterSurplusCount: 5,
          meterReadingTime: "2024-04-10 11:13:23",
          meterSinglePrice: 1,
          csq: "25",
          imei: "866207071904225",
          iccid: "89861124201046604058",
          meterCode: null,
          meterType: 1,
          voltage: "234.50",
          ampere: "0.01",
          batLow: 0,
          hardwareName: "壁挂_单相_CH59X_A",
          ver: "BF001S0006",
          isForbid: false,
          isWaterMultiplier: false,
          limitSwitch: false,
          limitAmount: 0,
          averPid: null,
          yesterdayUse: "0.00",
          online: false
        },
        {
          meterId: 1403074174812160,
          meterName: "591测试",
          meterNumber: "240321DBDCC6",
          meterAddress: "车间1",
          chargeTimes: null,
          meterStatus: 0,
          meterModelId: 2,
          meterModel: "蓝牙电表",
          meterUseCount: 11,
          meterSurplusCount: 0,
          meterReadingTime: "2024-04-11 10:42:07",
          meterSinglePrice: 1,
          csq: null,
          imei: null,
          iccid: null,
          meterCode: null,
          meterType: 1,
          voltage: "220.00",
          ampere: "0.00",
          batLow: 0,
          hardwareName: "壁挂_单相_CH59X_A",
          ver: "BF091S0002",
          isForbid: false,
          isWaterMultiplier: false,
          limitSwitch: false,
          limitAmount: 0,
          averPid: null,
          yesterdayUse: "0.00",
          online: false
        },
        {
          meterId: 1408162269855744,
          meterName: "测试设备",
          meterNumber: "240621B28AD1",
          meterAddress: "测试",
          chargeTimes: null,
          meterStatus: 1,
          meterModelId: 1,
          meterModel: "4G电表",
          meterUseCount: 0,
          meterSurplusCount: 50,
          meterReadingTime: "2024-06-21 13:59:28",
          meterSinglePrice: 1,
          csq: null,
          imei: null,
          iccid: null,
          meterCode: null,
          meterType: 1,
          voltage: "219.60",
          ampere: "0.01",
          batLow: 0,
          hardwareName: "壁挂_单相_CH573_A",
          ver: "AF001S0039",
          isForbid: false,
          isWaterMultiplier: false,
          limitSwitch: false,
          limitAmount: 0,
          averPid: null,
          yesterdayUse: "0.00",
          online: false
        },
        {
          meterId: 1408165607120896,
          meterName: "测试121212",
          meterNumber: "2403214CAEDA",
          meterAddress: "测试",
          chargeTimes: null,
          meterStatus: 1,
          meterModelId: 1,
          meterModel: "4G电表",
          meterUseCount: 0.68,
          meterSurplusCount: 49.81,
          meterReadingTime: "2024-06-21 14:57:44",
          meterSinglePrice: 1,
          csq: "30",
          imei: "860497074033637",
          iccid: "89860322472000587918",
          meterCode: null,
          meterType: 1,
          voltage: "219.70",
          ampere: "5.00",
          batLow: 0,
          hardwareName: "壁挂_单相_CH573_A",
          ver: "AF001S0038",
          isForbid: false,
          isWaterMultiplier: false,
          limitSwitch: false,
          limitAmount: 0,
          averPid: null,
          yesterdayUse: "0.00",
          online: false
        },
        {
          meterId: 1408929619787776,
          meterName: "测试cj",
          meterNumber: "240606AEDB5B",
          meterAddress: "办公室",
          chargeTimes: 2,
          meterStatus: 0,
          meterModelId: 3,
          meterModel: "4G倍率表",
          meterUseCount: 0,
          meterSurplusCount: 0,
          meterReadingTime: "2024-07-05 17:07:56",
          meterSinglePrice: 1,
          csq: "16",
          imei: "860567070749855",
          iccid: "89861124201045736067",
          meterCode: null,
          meterType: 1,
          voltage: "209.80",
          ampere: "0.01",
          batLow: 0,
          hardwareName: "4G3W_100V_CH59x_T",
          ver: "CJ000S0002",
          isForbid: false,
          isWaterMultiplier: false,
          limitSwitch: false,
          limitAmount: 0,
          averPid: null,
          yesterdayUse: "0.00",
          online: false
        },
        {
          meterId: 1409516401836032,
          meterName: "4g测试1",
          meterNumber: "240321DDE75C",
          meterAddress: "测试台",
          chargeTimes: null,
          meterStatus: 1,
          meterModelId: 1,
          meterModel: "4G电表",
          meterUseCount: 116.44,
          meterSurplusCount: 183.56,
          meterReadingTime: "2024-07-18 14:09:34",
          meterSinglePrice: 1,
          csq: "31",
          imei: "864145074800713",
          iccid: "898604F2102340054388",
          meterCode: null,
          meterType: 1,
          voltage: "230.80",
          ampere: "2.72",
          batLow: 0,
          hardwareName: "壁挂4G_单相_CH59X_T_A",
          ver: "CF001S0008",
          isForbid: false,
          isWaterMultiplier: false,
          limitSwitch: false,
          limitAmount: 0,
          averPid: null,
          yesterdayUse: "0.00",
          online: false
        },
        {
          meterId: 1409516451938304,
          meterName: "4g测试2",
          meterNumber: "240321DCCAEE",
          meterAddress: "测试台",
          chargeTimes: null,
          meterStatus: 1,
          meterModelId: 1,
          meterModel: "4G电表",
          meterUseCount: 116.35,
          meterSurplusCount: 183.65,
          meterReadingTime: "2024-07-18 14:08:29",
          meterSinglePrice: 1,
          csq: "31",
          imei: "864145074798792",
          iccid: "89860322472000650039",
          meterCode: null,
          meterType: 1,
          voltage: "231.00",
          ampere: "2.72",
          batLow: 0,
          hardwareName: "壁挂4G_单相_CH59X_T_A",
          ver: "CF001S0005",
          isForbid: false,
          isWaterMultiplier: false,
          limitSwitch: false,
          limitAmount: 0,
          averPid: null,
          yesterdayUse: "0.00",
          online: false
        },
        {
          meterId: 1409516482691072,
          meterName: "蓝牙测试1",
          meterNumber: "240321273CC6",
          meterAddress: "测试台",
          chargeTimes: null,
          meterStatus: 1,
          meterModelId: 2,
          meterModel: "蓝牙电表",
          meterUseCount: 0.07,
          meterSurplusCount: 299.93,
          meterReadingTime: "2024-07-10 17:00:10",
          meterSinglePrice: 1,
          csq: null,
          imei: null,
          iccid: null,
          meterCode: null,
          meterType: 1,
          voltage: "232.50",
          ampere: "2.53",
          batLow: 0,
          hardwareName: "B_M_CH59x_T_A",
          ver: "C6000S0019",
          isForbid: false,
          isWaterMultiplier: false,
          limitSwitch: false,
          limitAmount: 0,
          averPid: null,
          yesterdayUse: "0.00",
          online: false
        },
        {
          meterId: 1409516474433536,
          meterName: "蓝牙测试2",
          meterNumber: "2403215AD1D0",
          meterAddress: "测试台",
          chargeTimes: null,
          meterStatus: 1,
          meterModelId: 2,
          meterModel: "蓝牙电表",
          meterUseCount: 0.06,
          meterSurplusCount: 299.94,
          meterReadingTime: "2024-07-10 16:59:32",
          meterSinglePrice: 1,
          csq: null,
          imei: null,
          iccid: null,
          meterCode: null,
          meterType: 1,
          voltage: "233.00",
          ampere: "2.53",
          batLow: 0,
          hardwareName: "B_M_CH59x_T_A",
          ver: "C6000S0019",
          isForbid: false,
          isWaterMultiplier: false,
          limitSwitch: false,
          limitAmount: 0,
          averPid: null,
          yesterdayUse: "0.00",
          online: false
        },
        {
          meterId: 1411847456636928,
          meterName: "测试",
          meterNumber: "240812B15CA0",
          meterAddress: "111",
          chargeTimes: null,
          meterStatus: 1,
          meterModelId: 1,
          meterModel: "4G电表",
          meterUseCount: 0,
          meterSurplusCount: 50,
          meterReadingTime: "2024-08-16 16:11:51",
          meterSinglePrice: 1,
          csq: "28",
          imei: "864145074799584",
          iccid: "89860322472000651417",
          meterCode: null,
          meterType: 1,
          voltage: "0.00",
          ampere: "0.00",
          batLow: 0,
          hardwareName: "壁挂4G_单相_CH59X_T_A",
          ver: "CF001S0005",
          isForbid: false,
          isWaterMultiplier: false,
          limitSwitch: false,
          limitAmount: 0,
          averPid: null,
          yesterdayUse: "0.00",
          online: false
        }
      ], //  设备详情数据
      pageNum: 1, // 当前页
      pageSize: 10 ,// 当前页数量
      Line:false,
      Bar:false,
      Pie:false,
      Content: false, // 
    };
  },
  computed: {
    // 动态根据用户手动分页来获取数据
    paginatedData() {
      const start = (this.pageNum - 1) * this.pageSize;
      return this.Device_tableData.slice(start, start + this.pageSize);
    }
  },
  mounted() {
    this.getTimes();
    this.getDevice("", "", "", this.meterType);
    // let str = "1234567890-=";

    // console.log("21313131", str.slice(-6, -4));
  },
  methods: {
    // 页数量变化
    handleSizeChange(val) {
      console.log("数量", val);
      this.pageSize = val;
    },
    // 当前页变化
    handleCurrentChange(val) {
      this.pageNum = val;
      console.log("第几页", val);
    },
    //设备详情表格点击某一行触发的事件
    onRowClick(row) {
      console.log("当前点击了这一行", row);
      this.closeDeviceDialogApi();
      // 跳转设备管理，携带当前数据参数
      this.$router.push({
        path: "/device/deviceManger",
        query: {
          meterType: row.meterType,
          row
        }
      });
    },

    // 关闭设备详情弹框方法
    closeDeviceDialogApi() {
      this.DeviceDetailDialogShow = false;
    },

    // 跳转去设备管理页面
    goDeviceModule(meterType, val) {
      console.log("设备类型", meterType, val, val.length);

      // this.$router.push({
      //   path:'/device/deviceManger',
      //   query: {
      //     meterType,val
      //   }
      // })

      //  打开弹框加载当前各类表状态详细表格数量
      this.DeviceDetailDialogShow = true;
      this.Device_tableData = val; // 测试后面用于直接替换真实数据val
    },

    // 获取设备总数
    getDevice(groupId, meterModelId, meterName, meterType) {
      let loading = this.$loading({
        target: this.$refs.content,
        lock: true,
        text: "加载中..."
      });
      getDevice1Api(groupId, meterModelId, meterName, meterType).then(res => {
        if (res.code == 200) {
          this.meterCount = res.data.length;
          if (res.data.length > 0) {
          this.hezha = [];
            this.lazha = [];
            this.yichang = [];
            this.low= [];
            res.data.forEach(item => {
              if (item.meterStatus == 1) {
                this.hezha.push(item);
              }
              if (item.meterStatus == 0) {
                this.lazha.push(item);
              }
              if (Number(item.meterSurplusCount) < -0.01) {
                this.yichang.push(item);
              }
              if (
                -0.01 <= Number(item.meterSurplusCount) &&
                Number(item.meterSurplusCount) <= 10
              ) {
                this.low.push(item);
              }
            });
            console.log("this.hezha", this.hezha);
            console.log("this.lazha", this.lazha);
            console.log("this.yichang", this.yichang);
            console.log("this.low", this.low);

            this.hezhaCount = this.hezha.length;
            this.lazhaCount = this.lazha.length;
            this.yichangCount = this.yichang.length;
            this.lowCount = this.low.length;
            loading.close();
          } else {
            this.hezhaCount = 0;
            this.lazhaCount = 0;
            this.yichangCount = 0;
            this.lowCount = 0;
            loading.close();
          }
      
        }
      });
    },
    // 获取收入
    getIncome(date, dateOperation) {
      getIncomeApi(date, dateOperation).then(res => {
        let loading = this.$loading({
          target: this.$refs.bar,
          lock: true,
          text: "加载中..."
        });

        if (res.code == 200) {
          this.moneyAmount = res.data.amount;
          this.onlinePay = res.data.onlineIncome;
          this.underPay = res.data.offlineIncome;
          let opt = [];
          let val = [];
          res.data.amountBacks.forEach(item => {
            opt.push(
              item.date + (this.timeData1.dateOperation == "year" ? "月" : "日")
            );
            val.push(item.count);
          });
          this.optionData1 = opt;
          console.log("this.optionData121313131", this.optionData1);

          this.searyData1 = val;
          console.log("this.searyData1", this.searyData1);

          this.initBar();
        }
        loading.close();
      });
    },
    // 获取时间
    getTimes() {
      // let loading = this.$loading({
      //   lock: true,
      //   text: "加载中..."
      // });
      let year = new Date().getFullYear();
      let month = new Date().getMonth() + 1;
      let day = new Date().getDate();
      if (month < 10) {
        month = "0" + month;
      }
      if (day < 10) {
        day = "0" + day;
      }
      let time = year + "-" + month + "-" + day;
      this.timeData.date = year + "-" + month + "-" + day;
      this.timeData1.date = year + "-" + month + "-" + day;
      getQuantitiesApi(
        this.meterType,
        this.timeData.date,
        this.timeData.dateOperation
      )
        .then(res => {
          console.log("666", res);

          // 用电量  用水量
          let loading = this.$loading({
            target: this.$refs.center,
            lock: true,
            text: "加载中..."
          });
          if (res.code == 200) {
            if (res.data.amountBacks != null) {
              this.showLine = true;
              this.amountTitle = res.data.amount;
              this.amount = res.data.amount;
              let opt = [];
              let val = [];
              res.data.amountBacks.forEach(item => {
                opt.push(
                  item.date +
                    (this.timeData.dateOperation == "year" ? "月" : "日")
                );
                val.push(item.count);
              });
              this.optionData = opt;
              this.searyData = val;
              this.$nextTick(() => {
                this.initLine();
              });
            } else {
              this.showLine = false;
              this.amountTitle = "0.00";
              this.amount = "0.00";
              this.searyData = [];
            }
          }
          loading.close();

        })
        .catch(() => {
          loading.close();
        });
      // 收入
      getIncomeApi(this.timeData1.date, this.timeData1.dateOperation)
        .then(res => {
          let loading = this.$loading({
            target: this.$refs.bar,
            lock: true,
            text: "加载中..."
          });
          if (res.code == 200) {
            this.moneyAmountTitle = res.data.amount;
            this.moneyAmount = res.data.amount;
            this.onlinePay = res.data.onlineIncome;
            this.underPay = res.data.offlineIncome;
            let opt = [];
            let val = [];
            res.data.amountBacks.forEach(item => {
              opt.push(
                item.date +
                  (this.timeData1.dateOperation == "year" ? "月" : "日")
              );
              val.push(item.count);
            });
            this.optionData1 = opt;
            this.searyData1 = val;
            this.$nextTick(() => {
              this.initBar();
            });
            loading.close();
          }
          
        })
        .catch(() => {
          loading.close();
        });
      getIncomeRankApi(time, "month")
        .then(res => {
          let loading = this.$loading({
            target: this.$refs.pie,
            lock: true,
            text: "加载中..."
          });
          if (res.code == 200) {
            loading.close();
            if (res.data !== null) {
              this.showPie = true;
              this.searyData2 = [];
              res.data.forEach(item => {
                let arr = {};
                arr.value = Number(item.income).toFixed(2);
                arr.name = item.meterName;
                this.searyData2.push(arr);
              });
              console.log("this.searyData2123131", this.searyData2);
              this.$nextTick(() => {
                this.initPie();
              });
            }
          }
        })
        .catch(() => {
          loading.close();
        });
    },
    changeType(e) {
      this.meterType = e;
      if (e == 1) {
        this.isActive = true;
      } else {
        this.isActive = false;
      }
      this.getTimes();
      this.getDevice("", "", "", this.meterType);
    },
    getQuantities(typeId, date, dateOperation) {
      console.log('进来了99999999999');
      
          let loading = this.$loading({
          target: this.$refs.line,
          lock: true,
          text: "加载中..."
        });
      getQuantitiesApi(typeId, date, dateOperation).then(res => {

        if (res.code == 200) {
          if (res.data.amountBacks !== null) {
            this.showLine = true;
            this.amount = res.data.amount;
            let opt = [];
            let val = [];
            res.data.amountBacks.forEach(item => {
              opt.push(
                item.date +
                  (this.timeData.dateOperation == "year" ? "月" : "日")
              );
              val.push(item.count);
            });
            this.optionData = opt;
            this.searyData = val;
            this.$nextTick(() => {
              this.initLine();
              loading.close();
            });
          } else {
            this.amount = 0;
            this.showLine = false;
            this.amountTitle = "0.00";
            this.amount = "0.00";
            this.searyData = [];
            loading.close();
          }
        }
       
      });
    },
    // 选择年 或者日期
    dateChange() {
      if (this.timeData.date) {
        this.getQuantities(
          this.meterType,
          this.timeData.date,
          this.timeData.dateOperation
        );
      }
    },
    dateChange1() {
      if (this.timeData1.date) {
        this.getIncome(this.timeData1.date, this.timeData1.dateOperation);
      }
    },
    // 折线图
    initLine() {
      let myChart = this.$echarts.init(this.$refs.line);
      let option = {
        xAxis: {
          type: "category",
          boundaryGap: false, //距离坐标轴是否有间隙
          data: this.optionData,
          axisTick: {
            show: false
          }
        },
        yAxis: {
          type: "value",
          name: this.meterType == 1 ? "用电量（度）" : "用水量（m³）",
          minInterval: 1
        },
        tooltip: {
          // 提示框
          trigger: "axis", // 触发类型  axis：坐标轴   item：图形  none：不触发
          axisPointer: {
            //坐标轴指示器
            lineStyle: {
              color: "#278BFF"
            }
          }
        },
        series: [
          {
            name: this.meterType == 1 ? "用电量（度）" : "用水量（m³）",
            data: this.searyData,
            type: "line",
            smooth: 0.6,
            lineStyle: {
              color: "#5470C6",
              width: 2
            },
            areaStyle: {
              color: this.$echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "#1C8EF0"
                  },
                  {
                    offset: 1,
                    color: "#fff"
                  }
                ],
                false
              ),
              shadowColor: "rgba(0, 0, 0, 0.1)",
              shadowBlur: 10
            }
          }
        ]
      };
      myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    initBar() {
      let myChart = this.$echarts.init(this.$refs.bar);
      let option = {
        xAxis: {
          type: "category",
          boundaryGap: true, //距离坐标轴是否有间隙
          data: this.optionData1,
          axisTick: {
            show: false
          }
        },
        yAxis: {
          type: "value",
          name: "收入（元）",
          minInterval: 1
        },
        tooltip: {
          // 提示框
          trigger: "axis" // 触发类型  axis：坐标轴   item：图形  none：不触发
        },
        series: [
          {
            name: "收入（元）",
            data: this.searyData1,
            type: "bar",
            barWidth: "60%",
            itemStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#188DF0" // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#81BEF6" // 100% 处的颜色
                  }
                ],
                global: false // 缺省为 false
              }
            }
          }
        ]
      };
      myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    initPie() {
      let myChart = this.$echarts.init(this.$refs.pie);
      let option = {
        tooltip: {
          trigger: "item"
        },
        legend: {
          left: "left",
          orient: "vertical"
        },
        series: [
          {
            name: "收入（元）",
            radius: ["40%", "70%"],
            center: ["60%", "50%"],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            },
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2
            },
            data: this.searyData2,
            type: "pie"
          }
        ]
      };
      myChart.setOption(option);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    jumpDevice() {
      this.$router.push("/device/deviceManger");
    }
  }
};
</script>

<style lang="scss">
.dashboard {
  width: 100%;
  padding: 0px 15px;
  height: calc(100vh - 100px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-around;

  .meterType {
    width: 99%;
    height: 7%;
    background: #fff;
    border-radius: 30px;
    margin: 10px auto;
    display: flex;
    align-items: center;
    padding-left: 20px;

    span {
      margin: 0 20px;
      cursor: pointer;
      padding: 5px 0;
      border-bottom: 3px solid transparent;
    }

    .active {
      border-bottom: 3px solid #409eff;
      color: #409eff;
    }
  }

  .content {
    width: 100%;
    height: 90%;
    display: flex;
    justify-content: space-around;
    align-content: center;

    .leftContent {
      width: 68%;
      // background: pink;
      display: flex;
      flex-direction: column;

      // justify-content: space-around;
      .top {
        width: 100%;
        height: 12%;
        display: flex;
        justify-content: space-around;
        align-items: center;

        .top_item {
          width: 30%;
          height: 100%;
          background-size: 100% 100%;
          display: flex;
          justify-content: space-around;
          align-items: center;
          border-radius: 10px;
          cursor: pointer;

          .pic {
            background: hsla(0, 0%, 100%, 0.2);
            height: 60px;
            width: 60px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 50%;
          }

          .top_item_title {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
          }
        }
      }

      .center {
        width: 100%;
        height: 40%;
        margin: 20px 0;
        background: #fff;
        padding-top: 1%;
      }

      .bottom {
        box-sizing: border-box;
        width: 100%;
        height: 40%;
        background: #fff;
        padding-top: 1%;
      }
    }

    .rightContent {
      width: 28%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;

      .top {
        width: 100%;
        height: 48%;
        background: #fff;
        padding: 1% 0 0 1%;

        .content {
          display: flex;
          flex-direction: column;
          justify-content: space-around;

          .item {
            width: 100%;
            display: flex;
            justify-content: space-around;
            align-items: center;
            font-weight: bold;
            cursor: pointer;
          }
        }
      }
    }
  }

  .dialogDeviceDetail {
    /deep/ .table__row {
      cursor: pointer;
    }
    .el-table__cell {
      transition: background-color 0.3s;
      cursor: pointer;
    }

    .el-table .cell:hover {
      // cursor: pointer;
      // background-color: #d62d2d; /* 鼠标悬停时的背景色 */
    }
  }
}
</style>
